<template>
  <div>
    <a-card :bordered="false" class="ant-pro-components-tag-select">
      <a-form :form="form" layout="inline">
        <standard-form-row title="当前用户" block style="padding-bottom: 11px;">
          <a-form-item :hidden="isLogin">
            未登录 <a-button type="link" @click="login">点击进行登录</a-button>
          </a-form-item>
          <a-form-item :hidden="!isLogin">
            {{userData.realname}} <a-divider type="vertical" />当前余额：{{userData.account}}  <a-divider type="vertical" />下单数：{{userData.orderNum}} <a-button type="link" @click="logout">退出</a-button>
          </a-form-item>
        </standard-form-row>
        <standard-form-row title="所属类目" block style="padding-bottom: 11px;">
          <a-form-item>
            <tag-select v-if="productType.length>0" @change="handleTypeChange">
              <!-- <tag-select-option   v-for="(item) in productType" v-bind:key="item.id+''" :value="item.id+''">{{item.name}}</tag-select-option> -->
              <tag-select-option   v-for="(item) in productType" v-bind:key="item.id+''" :value="item.id+''">{{item.name}}</tag-select-option>
            </tag-select>
          </a-form-item>
        </standard-form-row>

        <!-- <standard-form-row title="其它选项" grid last>
          <a-row>
            <a-col :lg="8" :md="10" :sm="10" :xs="24">
              <a-form-item :wrapper-col="{ sm: { span: 16 }, xs: { span: 24 } }" label="关键字搜索">
                <a-select
                  style="max-width: 200px; width: 100%;"
                  mode="multiple"
                  placeholder="不限"
                  v-decorator="['author']"
                  @change="handleChange"
                >
                  <a-select-option value="lisa">苹果手机</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </standard-form-row> -->
      </a-form>
    </a-card>

    <div class="ant-pro-pages-list-applications-filterCardList">
      <a-list :loading="loading" :data-source="productData" :grid="{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }" style="margin-top: 24px;">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-card :body-style="{ paddingBottom: 20 }" hoverable>
            <img slot="cover" :src="item.picture"  :alt="item.name" />
            <a-card-meta :title="item.name">
              <template slot="description">
                <ellipsis :length="30">{{ item.description }}</ellipsis>
              </template>
            </a-card-meta>
            <template slot="actions">
              <a-tooltip title="抢购">
                <a-icon @click="createOrder(item.id)" type="shopping-cart" />
              </a-tooltip>
            </template>
            <div class="">
              <card-info buy="100" :storage="item.storage" :price="item.price"></card-info>
            </div>
          </a-card>
        </a-list-item>
      </a-list>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { TagSelect, StandardFormRow, Ellipsis, AvatarList } from '@/components'
import CardInfo from './components/CardInfo'
import LoginForm from './components/login/basicForm'
import { getProductList,getProductType,createOrder,validateAndGet } from '@/api/jfcloud'

const TagSelectOption = TagSelect.Option
const AvatarListItem = AvatarList.AvatarItem

export default {
  components: {
    AvatarList,
    AvatarListItem,
    Ellipsis,
    TagSelect,
    TagSelectOption,
    StandardFormRow,
    CardInfo
  },
  data () {
    return {
      data: [],
      form: this.$form.createForm(this),
      loading: true,
      isLogin: false,
      productData: [],
      productType: [],
      userData: {},
      token : null
    }
  },
  filters: {
    fromNow (date) {
      return moment(date).fromNow()
    }
  },
  mounted () {
    this.getDatas()
    //判断登录
    var tokenData=JSON.parse(localStorage.getItem('jfcloud-token'))
    var userData=JSON.parse(localStorage.getItem('jfcloud-user'))
    if(!tokenData){
      this.isLogin=false
    } else{
      this.isLogin=true
      this.userData=userData
      this.token=tokenData
    }
  },
  methods: {
    handleChange (value) {
      console.log(`selected ${value}`)
    },
    handleTypeChange (value) {
      if(value.value == 'total'){ //全部
        this.productType = this.productType.map(item=>{
          item.checked = value.checked;
          return item;
        })
      }else{
        this.productType = this.productType.map(item=>{
          if(item.id == value.value){
            item.checked = value.checked;
          }
          return item;
        })
      }
      let selecteds = [];
      for(let i =0;i<this.productType.length;i++){
        if(this.productType[i].checked){
          selecteds.push(this.productType[i].id);
        }
      }
      selecteds = selecteds.join(",");
      console.log( selecteds);
      getProductList({typeIds: selecteds})
        .then(res => {
          // return res.datas.records
          this.loading = false
          this.productData=res.datas.records
      })
    },
    getDatas () {
      if(this.token){
        validateAndGet({token:this.token}).then(
          res => {
            var userData= JSON.stringify(res.datas)
            localStorage.setItem('jfcloud-user',userData) 
            this.userData=res.datas
          }
        )
      }

      getProductList({})
        .then(res => {
          // return res.datas.records
          this.loading = false
          this.productData=res.datas.records
      })
      getProductType({})
        .then(res => {
          // return res.datas.records
          this.loading = false
          this.productType=res.datas
      })
      
    },
    login () {
        var d=this.$dialog(LoginForm,
          // component props
          {
            record: {},
            on: {
              ok () {
                console.log('ok 回调')
              },
              cancel () {
                console.log('cancel 回调')
              },
              close () {
                console.log('modal close 回调')
              }
            }
          },
          // modal props
          {
            title: '登录',
            width: 700,
            centered: true,
            maskClosable: false,
            footer: null
            
        })
    },
    logout () {
      localStorage.removeItem('jfcloud-token')
      localStorage.removeItem('jfcloud-user')
      this.isLogin=false
    },
    createOrder (id) {
      if(!this.token || this.token==''){
         this.$error({
            title: '请先登录再下单'
          })
        return
      }
      var values = {}
      values.token = this.token
      values.details=[{productId:id,productNum:1}]
      createOrder(values)
            .then(res => {
              if(res.status == '1'){
                this.$success({
                  title: '下单成功'
                })
                this.getDatas()
              }else{
                this.$error({
                  title: res.meta
                })
              }
      })
    }
  },
  
}

</script>

<style lang="less" scoped>
.page-header-content {
  display: flex;

  .avatar {
    flex: 0 1 72px;

    & > span {
      display: block;
      width: 72px;
      height: 72px;
      border-radius: 72px;
    }
  }

  .content {
    position: relative;
    top: 4px;
    flex: 1 1 auto;
    margin-left: 24px;
    line-height: 22px;

    .content-title {
      margin-bottom: 12px;
      font-weight: 500;
      font-size: 20px;
      line-height: 28px;
    }
  }
}
.ant-pro-components-tag-select {
  /deep/ .ant-pro-tag-select .ant-tag {
    margin-right: 24px;
    padding: 0 8px;
    font-size: 14px;
  }
}
.ant-pro-pages-list-projects-cardList {
  margin-top: 24px;

  /deep/ .ant-card-meta-title {
    margin-bottom: 4px;
  }

  /deep/ .ant-card-meta-description {
    height: 44px;
    overflow: hidden;
    line-height: 22px;
  }

  .cardItemContent {
    display: flex;
    height: 20px;
    margin-top: 16px;
    margin-bottom: -4px;
    line-height: 20px;

    > span {
      flex: 1 1;
      color: rgba(0,0,0,.45);
      font-size: 12px;
    }

    /deep/ .ant-pro-avatar-list {
      flex: 0 1 auto;
    }
  }
}
</style>
